<template>
  <el-row>
    <div class="bar">
      <el-button type="primary" @click="addSilbing()">兄弟菜单</el-button>
      <el-button type="primary" @click="addChild()">子菜单</el-button>
      <el-button type="primary" @click="delNode()">删除</el-button>
    </div>
    <el-col :span="6" class="list">
      <el-tree ref="tree" :data="menus" :props="defaultProps"
               :default-expand-all=true :highlight-current=true :expand-on-click-node=false
               @node-click="handleNodeClick"></el-tree>
    </el-col>
    <el-col :span="18" class="main">
      <el-form ref="menuForm" :model="selectedMenu" :rules="rules" label-width="100px" v-loading = "loading">
        <el-form-item label="菜单名称" required prop="name">
          <el-input v-model="selectedMenu.name"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="selectedMenu.path"></el-input>
        </el-form-item>
        <el-form-item label="排序系数">
          <el-input type="number" v-model.number="selectedMenu.weight"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-select v-model="selectedMenu.icon" filterable clearable placeholder="请选择" style="width:100%">
            <el-option
              v-for="icon in icons"
              :label="icon"
              :value="icon">
              <i style="float: left" :class="'fa ' + icon"></i>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ icon }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="selectedMenu.description" placeholder='描述...'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<style scoped>
  .bar{
    padding: 10px;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.25);
    position: relative;
  }
  .el-tree{
    border: none;
  }
  .list{
    margin-top: 20px;
    border-right: 1px solid #ababab;
  }
  .main{
    padding: 20px;
  }
</style>
<script>
  import menuApi from '../../../api/sys/menuApi'
  import icons from './icons'
  export default {
    data () {
      return {
        rules: {
          name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' }
          ]
        },
        defaultProps: {
          children: 'subMenus',
          label: 'name'
        },
        loading: false,
        menus: [],
        icons: icons,
        selectedMenu: {name: '', icon: '', path: '', description: '', weight: 0}
      }
    },
    created () {
      menuApi.getMenuTree().then(resp => {
        this.menus = resp.body.data
      })
    },
    methods: {
      handleNodeClick (data) {
        this.selectedMenu = data
      },
      onSubmit () {
        if (!this.selectedMenu.pkid) {
          this.$message({
            showClose: true,
            message: '请先新增菜单',
            type: 'error'
          })
          return
        }
        this.$refs.menuForm.validate((valid) => {
          if (valid) {
            let menu = Object.assign({}, this.selectedMenu)
            menu.pkid = menu.pkid.includes('new_') ? null : menu.pkid
            menuApi.save(menu).then((resp) => {
              this.loading = false
              this.selectedMenu.pkid = resp.body.data.pkid
              this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success'
              })
            },
            (resp) => { this.loading = false })
          } else {
            return false
          }
        })
      },
      generateNewMenu (parentId) {
        let menu = {}
        menu.name = '请输入名称'
        menu.pkid = 'new_' + this.menus.length
        menu.parentId = parentId
        menu.icon = ''
        menu.description = ''
        menu.weight = 10
        menu.path = ''
        return menu
      },
      findTargetMenu (menus, pkid) {
        if (pkid === '0') return menus
        let target = menus.find(menu => menu.pkid === pkid)
        if (target) return target
        for (let i = 0; i < menus.length; i++) {
          if (menus[i].children) {
            let target = this.findTargetMenu(menus[i].children, pkid)
            if (target) return target
          }
        }
      },
      addSilbing () {
        if (!this.selectedMenu.pkid) {
          this.$message({
            showClose: true,
            message: '请选择菜单节点',
            type: 'warning'
          })
          return false
        }

        let target = this.findTargetMenu(this.menus, this.selectedMenu.parentId)
        if (Array.isArray(target)) {
          target.push(this.generateNewMenu('0'))
        } else {
          target.subMenus.push(this.generateNewMenu(target.pkid))
        }
        this.selectedMenu = {}
      },
      addChild () {
        if (!this.selectedMenu.pkid) {
          this.$message({
            showClose: true,
            message: '请选择菜单节点',
            type: 'warning'
          })
          return false
        }
        if (this.selectedMenu.pkid.includes('new_')) {
          this.$message({
            showClose: true,
            message: '请先保存当前菜单',
            type: 'error'
          })
          return
        }
        if (this.selectedMenu.parentId !== '0') {
          this.$message({
            showClose: true,
            message: '只支持二级菜单',
            type: 'error'
          })
          return false
        }
        let target = this.findTargetMenu(this.menus, this.selectedMenu.pkid)
        let menu = this.generateNewMenu(target.pkid)
        if (!target.subMenus) {
          this.$set(target, 'subMenus', [menu])
        } else {
          target.subMenus.push(menu)
        }
        this.selectedMenu = {}
      },
      delNode () {
        if (!this.selectedMenu.pkid) {
          this.$message({
            showClose: true,
            message: '请选择菜单节点',
            type: 'error'
          })
          return false
        }
        this.$confirm('确认删除吗?', '提示', {
          type: 'warning'
        }).then(() => {
          if (this.selectedMenu.pkid.includes('new_')) {
            this.removeMenuNode()
          } else {
            menuApi.delete(this.selectedMenu.pkid).then(resp => {
              this.removeMenuNode()
            })
          }
        },
        () => {})
      },
      removeMenuNode () {
        if (this.selectedMenu.parentId !== '0') {
          let target = this.findTargetMenu(this.menus, this.selectedMenu.parentId)
          target.subMenus.splice(target.subMenus.indexOf(this.selectedMenu), 1)
        } else {
          this.menus.splice(this.menus.indexOf(this.selectedMenu), 1)
        }
        this.selectedMenu = {}
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
      }
    }
  }
</script>
